
	/**
	 * On Content Load
	 * Basically run the application
	 *
	 */
	window.document.addEventListener("DOMContentLoaded",function(event){

		//SWIPE
		//	This is the swipe gesture.
		//	http://jbkflex.wordpress.com/2012/01/12/
		//	replicating-the-swipe-gesture-iphone-gallery-for-mobile-web-html5-part-2/


		Government.controllsItems = (function(){

			var prevoius = document.createElement("a");
				prevoius.href = "#";
				prevoius.appendChild( document.createTextNode("<<") );
				prevoius.style.position = "absolute";
				prevoius.style.zIndex = 4;
				prevoius.style.top = "10px";
				prevoius.style.left = 0;
			var next = document.createElement("a");
				next.href = "#";
				next.appendChild( document.createTextNode(">>") )
				next.style.position = "absolute";
				next.style.zIndex = 4;
				next.style.top = "10px";
				next.style.right = 0;

			document.body.appendChild(prevoius);
			document.body.appendChild(next);

			return {
				previous: prevoius,
				next: next
			};

		})();

		//TIMELINE
		//	create and configure the timeline
		//	container
		Government.timelineContainer = (function(){
			var container = document.createElement("ul");
				container.style.position = "fixed";
				container.style.zIndex = 2;
				container.style.bottom = 0;
				container.style.left = 0;
				container.style.right = 0;
			document.body.appendChild( container );
			return container;
		})();

		//CONTAINER
		//	create and store in namespace the outer-most
		//	container for the application.
		Government.container = (function(){
			var container = document.createElement("ul");
				container.style.position = "absolute";
				container.style.zIndex = 1;
				container.style.top = 0;
				container.style.right = 0;
				container.style.bottom = 0;
				container.style.left = 0;
			document.body.appendChild( container );
			return container;
		})();

		//
		window.addEventListener("resize",function(event){
			//console.log(event);
		},false);

			

		//LOAD LIST
		//	load a simple list and in the callback;
		//	call for complete data on the first object in collection.
		Government.loadSimpleList(function(){
			this.loadEntry(
				this.governments[0]._id.$id,
				this.container.childNodes[0],
				function(){
					Government.drawTimeline();
					
					/* @todo refactor*/
					Government.controllsItems.next.addEventListener("click",function(event){
						event.preventDefault();
						Government.index = (Government.index+1==Government.governments.length)?Government.governments.length-1:Government.index+1;
						Government.container.style.webkitTransform = "translate3d(-"+((100/Government.governments.length)*Government.index)+"%, 0,0)";
					},false);					
					Government.controllsItems.previous.addEventListener("click",function(event){
						event.preventDefault();
						Government.index = (Government.index-1<=0)?0:Government.index-1;
						Government.container.style.webkitTransform = "translate3d(-"+((100/Government.governments.length)*Government.index)+"%, 0,0)";
					},false);

var color = ['red','green','blue'];
					Government.container.style.width = this.governments.length *100 + "%";
					Government.container.parentNode.style.overflow = "hidden";
					console.log(Government.container.childNodes);
					Array.prototype.forEach.call(Government.container.childNodes,function(item,index,collection){
						item.style.width = (100/Government.governments.length)+"%";
						item.style.float = "left";
						item.style.backgroundColor = color[index];
					});
					/* @todo end refactor*/
				}
			);
		});
	},false);



	/**
	 *
	 * @namespace Government
	 */
	var Government = {

		/**
		 * Container is the outer-most HTMLElement
		 * that contains the results
		 * @var {HTMLElement}
		 */
		container:null,

		/**
		 *
		 * @var {HTMLElement}
		 */
		timelineContainer:null,

		controllsItems:null,

		index: 0,

		/**
		 * Array of simple government objects
		 * @var {Array}
		 */
		governments:[],

		/**
		 *
		 */
		governmentObjects:{},

		/**
		 *
		 */
		drawTimeline: function(){
			this.governments.forEach(function(item,index,collection){
				var i = document.createElement('li');
					i.appendChild( document.createTextNode( item.from.sec ) )
				Government.timelineContainer.appendChild(i);
			});
		},
		/**
		 * Load the simple list in via XmlHttpRequest.
		 * This function will then call another in the same
		 * namespace to render the list out in HTML
		 *
		 * @param {Function} Called then XmlHttpRequest is finished
		 *		'this' will be Government namespace,
		 *		@argument: {Array} array of government data objects
		 *		@argument: {HTMLElement} element that should be injected
		 *						with html
		 */
		loadSimpleList: function(callback){
			var callback = callback || function(){};
			var xhr = new XMLHttpRequest();
				xhr.open("GET","/government/api");
				xhr.setRequestHeader("Accept","application/json");
				xhr.addEventListener("load",function(event){ 
					try{
						Government.governments = JSON.parse(event.target.responseText).content.governments;
						Government.drawSimpleList();
						callback.call(Government);
					}catch(e){
						throw e.message; //TODO do something here
					}
				},false);
				xhr.send();
		},

		/**
		 * Get's just the simple government list as an array
		 * converts it into a list and append it to the container
		 *
		 */
		drawSimpleList: function(){
			this.governments.forEach(function(item,index,collection){
				var element = document.createElement("li");
					element.dataset.id = (item._id.$id);
					element.appendChild( document.createTextNode(item.name) );
				Government.container.appendChild(element);
			});
		},

		/**
		 * Load one complete entry via XmlHttpRequest.
		 * This function will call another in the same namespace
		 * to render out the returned object
		 *
		 * @param {int} ID of the entry
		 * @param {HTMLElement} container for the entry
		 * @param {Function} Called when XmlHttpRequest has finished
		 *		'this' will be Government namespace,
		 *		@argument: {Object} government data object
		 *		@argument: {HTMLElement} element that should be injected
		 *						with html
		 */
		loadEntry: function(id,container,callback){ 
			var callback = callback || function(){};
			var xhr = new XMLHttpRequest();
				xhr.open("GET","/government/api/"+id);
				xhr.setRequestHeader("Accept","application/json");
				xhr.addEventListener("load",function(event){
					var object = JSON.parse(event.target.responseText).content.government;
					Government.drawCompleteEntry(object,container);
					callback.call(Government,object,container);
				},false);
				xhr.send();
		},

		/**
		 * Draw one complete government object
		 * @param {Object} Government dta object
		 * @param {HTMLElement} container for the markup
		 */
		drawCompleteEntry: function(object, container){

			var headline = (function(){
				var headline = document.createElement("h1");
					headline.appendChild( document.createTextNode(object.name) );
				return headline;
			})();

			var description = (function(){
				var desc = document.createElement("p");
					desc.appendChild( document.createTextNode(object.description) );
				return desc;
			})();

			var posters = (function(){
				var container = document.createElement("ul");
				object.media.forEach(function(item,index,collection){
					var li = document.createElement("li");
					var figure = document.createElement('figure');
					var img = new Image();
						img.src = item.data;
						img.style.maxWidth = "100%";
					var caption = document.createElement('figcaption'); 
						caption.appendChild( document.createTextNode(item.description) );
					figure.appendChild(img);
					figure.appendChild(caption);
					li.appendChild(figure);
					container.appendChild(li);
				});
				return container;
			})();

			var members = (function(){
				var container = document.createElement("ul");
				object.members.forEach(function(item,index,collection){
					var li = document.createElement("li");
						li.appendChild( document.createTextNode(item.name) );

					var officeList = document.createElement("ul");
					item.office.forEach(function(i){
						var officeListItem = document.createElement("li");
							officeListItem.appendChild( document.createTextNode(i.name + "" + i.from.sec + "" + i.to.sec) );
						officeList.appendChild(officeListItem);
					});	
					li.appendChild(officeList);	

					container.appendChild(li);
				});
				return container;
			})();

			var offices = (function(){
				var map = {};
				object.members.forEach(function(item,index,collection){

					item.office.forEach(function(i){
						if( !map.hasOwnProperty(i.name) ){
							map[i.name] = []
						}
						item.from = i.from;
						item.to = i.to;
						map[i.name].push(item);
					});

				});
				return map;
			})();

			var officeList = (function(){
				var list = document.createElement("ul");

				for( i in offices ){
					li = document.createElement("li");
					li.appendChild( document.createTextNode(i) );

					var ul = document.createElement("ul");
					offices[i].forEach(function(off){
						var s = document.createElement('li');
							s.appendChild( document.createTextNode(off.name) );
						ul.appendChild(s);
					});

					li.appendChild(ul);

					list.appendChild(li)
				}
				return list;
			})();


			var canvas = (function(){

				var canvas = document.createElement("div");
				/*
				var chart = d3.select(canvas).append('svg')
					.attr('width',container.offsetWidth)
					.attr('height',300)
					.selectAll('rect');
				*/
				return canvas;

			})();


			container.appendChild(headline);
			container.appendChild(description);
			container.appendChild(posters);
			container.appendChild(members);
			container.appendChild(officeList);
			container.appendChild(canvas);

		}

	}